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

    50% {
        transform: rotate(180deg)
    }

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

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

    50% {
        transform: rotate(180deg)
    }

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

* {
    margin: 0
}
/*generals*/
.cw_overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(113,113,113,.58);
    top: 0;
    left: 0;
    z-index: 100000;
    display: none
}

.cw_div {
    position: absolute;
    margin: 0 auto;
    top: 25%;
    left: 30%;
    width: 30%;
    background-color: white;
    text-align: center;
    box-shadow: 0px 1px 13px -1px black;
}

    .cw_div .cw_label {
        color: blue;
        text-align: left;
    }

.cw_panel {
    position: relative;
    height: 100%;
    width: 100%;
    border: solid 1px lightgray;
    padding: 0.5em;
}

.cw_heading {
    position: relative;
    display: block;
    text-align: left;
    padding: 10px;
    font-size: 1.5em;
    border-radius: 10px 10px 0 0;
    border-width: 1px;
    border-style: solid;
    border-color: transparent transparent #c1c1c1;
    font-weight: 700
}

.cw_body {
    padding: 10px;
    font-size: 1.2em
}

.cw_footer {
    display: block;
    text-align: right;
    padding: 10px;
    border-radius: 0 0 10px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #c1c1c1 transparent transparent
}

.cw_btn {
    right: 0;
    padding: 10px 25px;
    border: solid 1px gray;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    margin-right: 5px;
}

    .cw_btn:active {
        background: black;
        color: white;
    }

    .cw_btn:hover {
        background: black;
        color: white;
        transition: all ease-in-out 500ms
    }

.cw_label {
    margin-right: 1em;
    display: block;
}

.cw_input {
    outline: none;
    padding: 0em 0.5em;
    text-shadow: none;
    box-shadow: none;
    border: solid 1px lightgray;
}
/*cw-loading-icon*/
.cw_loading_div {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -11em;
    margin-left: -9em;
    display: none;
    width: 18em;
    height: 22em;
    z-index: 100000
}

.cw_loading_message_div {
    position: absolute;
    bottom: 0;
    padding-left: 5px;
    font-weight: bold;
    width: 100%;
    z-index: 1;
}

.cw_gearbox {
    position: absolute;
    margin-top: 1em;
    margin-left: 1em;
    height: 20em;
    width: 20em
}

.cw_gearbox_large {
    position: absolute;
    height: 14.4em;
    width: 14.4em;
    background-color: #d4d4d4;
    border-radius: 50%;
    margin-left: .4em;
    animation: rotate_cw_large_gearbox 4.5s infinite linear
}

.cw_gearbox_small {
    position: absolute;
    height: 7em;
    width: 7em;
    background-color: #00afda;
    border-radius: 50%;
    margin-left: 9.5em;
    margin-top: 14.3em;
    animation: rotate_cw_small_gearbox 3s infinite linear;
    animation-direction: reverse
}

.cw_bar {
    position: absolute;
    background-color: inherit;
    margin-top: 6.2em;
    margin-left: -1.1em;
    height: 2.1em;
    width: 16.8em;
    border-radius: .4em
}

.cw_small_bar {
    position: absolute;
    background-color: inherit;
    height: 1.7em;
    width: 9.3em;
    margin-left: -1.1em;
    margin-top: 2.7em;
    border-radius: .4em
}

.cw_inner_circle_large {
    position: absolute;
    height: 8em;
    width: 8em;
    background-color: #00afda;
    z-index: 1;
    border-radius: 50%;
    margin-top: 3.2em;
    margin-left: 3.2em
}

.cw_inner_circle_small {
    position: absolute;
    height: 5em;
    width: 5em;
    background: #d4d4d4;
    z-index: 1;
    border-radius: 50%;
    margin-top: 1em;
    margin-left: 1em
}

.cw_large {
    position: absolute;
    font-size: 3em;
    z-index: 101;
    margin-top: 1.5em;
    margin-left: 1.7em;
    color: white
}

.cw_loading {
    position: absolute;
    margin-top: 8em;
    margin-left: 5.6em;
    z-index: 102;
    color: white
}
/*cw-mobile-loading-icon*/
.cw_mob_loading_div {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -6em;
    margin-left: -5em;
    display: none;
    width: 11em;
    height: 13em;
    z-index: 100000;
}

.cw_mob_gearbox {
    position: absolute;
    margin-top: 1em;
    margin-left: 1em;
    height: 20em;
    width: 20em
}

.cw_mob_gearbox_large {
    position: absolute;
    height: 7.2em;
    width: 7.2em;
    background-color: #d4d4d4;
    border-radius: 50%;
    margin-left: .4em;
    animation: rotate_cw_large_gearbox 4.5s infinite linear
}

.cw_mob_gearbox_small {
    position: absolute;
    height: 3.5em;
    width: 3.5em;
    background-color: #337ab7;
    border-radius: 50%;
    margin-left: 4.75em;
    margin-top: 7.15em;
    animation: rotate_cw_small_gearbox 3s infinite linear;
    animation-direction: reverse;
}

.cw_mob_bar {
    position: absolute;
    background-color: inherit;
    margin-top: 3.1em;
    margin-left: -0.55em;
    height: 1.05em;
    width: 8.4em;
    border-radius: .2em;
}

.cw_mob_small_bar {
    position: absolute;
    background-color: inherit;
    height: 0.85em;
    width: 4.65em;
    margin-left: -0.55em;
    margin-top: 1.35em;
    border-radius: 0.2em;
}

.cw_mob_inner_circle_large {
    position: absolute;
    height: 5em;
    width: 5em;
    background-color: #337ab7;
    z-index: 1;
    border-radius: 50%;
    margin-top: 1.1em;
    margin-left: 1.1em;
}

.cw_mob_inner_circle_small {
    position: absolute;
    height: 2.5em;
    width: 2.5em;
    background: #d4d4d4;
    z-index: 1;
    border-radius: 50%;
    margin-top: 0.5em;
    margin-left: 0.5em;
}

.cw_mob_large {
    position: absolute;
    font-size: 1.5em;
    z-index: 101;
    margin-top: 1.25em;
    margin-left: 1.9em;
    color: white;
}

.cw_mob_loading {
    position: absolute;
    margin-top: 3.8em;
    margin-left: 2.8em;
    z-index: 102;
    color: white;
    font-size: 0.9em;
}
/*cw-toast-box*/
.cw_toast_box {
    position: fixed;
    margin: 0 auto;
    bottom: 5%;
    left: 10%;
    width: 80%;
    background-color: rgba(202,202,204,.75);
    text-align: center;
    border-radius: 35px;
    z-index: 100000;
    display: none
}

.cw_toast_label {
    position: relative;
    color: #00afda;
    bottom: 1px;
    font-size: 2em;
    width: 90%;
    height: 100%;
    margin: 0 10px
}

.cw_alert_label {
    max-height: 50vh;
    overflow: auto;
}

.cw_alert_overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(113,113,113,.58);
    top: 0;
    left: 0;
    z-index: 100000;
    display: none
}

.cw_alert_div {
    position: absolute;
    margin: 0 auto;
    top: 5%;
    left: 30%;
    width: 30%;
    background-color: #e6e3e3;
    text-align: center;
    color: #00afda;
    box-shadow: 0 0 10px #00afda
}

.cw_alert_panel {
    position: relative;
    height: 100%;
    width: 100%
}

.cw_alert_heading {
    position: relative;
    display: block;
    text-align: left;
    padding: 10px;
    font-size: 1.5em;
    border-radius: 10px 10px 0 0;
    border-width: 1px;
    border-style: solid;
    border-color: transparent transparent #c1c1c1;
    font-weight: 700
}

.cw_alert_body {
    padding: 10px;
    font-size: 1.2em
}

.cw_alert_footer {
    display: block;
    text-align: right;
    padding: 10px;
    border-radius: 0 0 10px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #c1c1c1 transparent transparent
}

.cw_alert_ok_btn {
    right: 0;
    padding: 10px 25px;
    border-radius: 10px;
    border: solid 1px gray;
    background: transparent;
    font-weight: 700;
    cursor: pointer
}

    .cw_alert_ok_btn:active {
        background: #00afda
    }

    .cw_alert_ok_btn:hover {
        background: #00afda;
        color: #00afad;
        transition: all ease-in-out 500ms
    }

.cw_custom_alert_one_btn {
    right: 0;
    padding: 10px 25px;
    border-radius: 10px;
    border: solid 1px gray;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    margin-right: 0.5em;
}

    .cw_custom_alert_one_btn:active {
        background: #00afda
    }

    .cw_custom_alert_one_btn:hover {
        background: #00afda;
        color: #00afad;
        transition: all ease-in-out 500ms
    }

.cw_mob_alert_overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(113,113,113,.58);
    top: 0;
    left: 0;
    z-index: 100000;
    display: none
}

.cw_mob_alert_div {
    position: absolute;
    margin: 0 auto;
    top: 35%;
    left: 10%;
    width: 80%;
    background-color: #e6e3e3;
    text-align: center;
    border-radius: 1em;
    color: #00afda;
    box-shadow: 0 0 10px #00afda;
    font-size: 1em
}

.cw_mob_alert_panel {
    position: relative;
    height: 100%;
    width: 100%
}

.cw_mob_alert_heading {
    position: relative;
    display: block;
    text-align: left;
    padding: 0.3em 0.1em 0.1em 0.5em;
    font-size: 2.4em;
    border-radius: .5em .5em 0 0;
    border-width: 1px;
    border-style: solid;
    border-color: transparent transparent #c1c1c1;
    font-weight: 700;
    background-color: #d2caca
}

.cw_mob_alert_body {
    padding: 0.2em;
    font-size: 2.7em
}

.cw_mob_alert_footer {
    display: block;
    padding: 0.2em;
    border-radius: 0 0 1em 1em;
    border-width: 1px;
    border-style: solid;
    border-color: #c1c1c1 transparent transparent;
    background-color: #d2caca
}

.cw_mob_alert_ok_btn {
    right: 0;
    padding: 10px 25px;
    border-radius: 10px;
    border: solid 1px gray;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    font-size: 1em;
    width: 30%
}

    .cw_mob_alert_ok_btn:active {
        background: #00afda
    }

    .cw_mob_alert_ok_btn:hover {
        background: #00afda;
        color: #00afad;
        transition: all ease-in-out 500ms
    }

.cw_confirm_overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(113,113,113,.58);
    top: 0;
    left: 0;
    z-index: 100000;
    display: none
}

.cw_confirm_div {
    position: absolute;
    margin: 0 auto;
    top: 20%;
    left: 30%;
    width: 30%;
    background-color: #e6e3e3;
    text-align: center;
    border-radius: 10px;
    color: #00afda;
    box-shadow: 0 0 10px #00afda
}

.cw_confirm_panel {
    position: relative;
    height: 100%;
    width: 100%
}

.cw_confirm_heading {
    position: relative;
    display: block;
    text-align: left;
    padding: 10px;
    font-size: 1.5em;
    border-radius: 10px 10px 0 0;
    border-width: 1px;
    border-style: solid;
    border-color: transparent transparent #c1c1c1;
    font-weight: 700
}

.cw_confirm_body {
    padding: 10px;
    font-size: 1.2em
}

.cw_confirm_footer {
    display: block;
    text-align: right;
    padding: 10px;
    border-radius: 0 0 10px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #c1c1c1 transparent transparent
}

.cw_confirm_yes_btn {
    right: 0;
    padding: 10px 25px;
    border-radius: 10px;
    border: solid 1px gray;
    background: transparent;
    font-weight: 700;
    cursor: pointer
}

    .cw_confirm_yes_btn:active {
        background: #00afda
    }

    .cw_confirm_yes_btn:hover {
        background: #00afda;
        color: #00afad;
        transition: all ease-in-out 500ms
    }

.cw_confirm_no_btn {
    right: 0;
    padding: 10px 25px;
    border-radius: 10px;
    border: solid 1px gray;
    background: transparent;
    font-weight: 700;
    cursor: pointer
}

    .cw_confirm_no_btn:active {
        background: #00afda
    }

    .cw_confirm_no_btn:hover {
        background: #00afad;
        color: #00afad;
        transition: all ease-in-out 500ms
    }
/*image-editor*/
.cw_image_editor_div {
    position: fixed;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    z-index: 100000;
}

.cw_image_editor_mobile_div {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

.crop-wrapper {
    background-color: rgba(255,255,255,1);
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.resize-container {
    position: absolute;
    display: inline-block;
    cursor: move;
    margin: 0 auto;
}

.resize-container-ontop {
    position: absolute;
    cursor: move;
    background-color: rgba(5,255,5,0);
    z-index: 1000;
    width: 100%;
    height: 100%;
}

.resize-container img {
    display: block;
}

.resize-container:hover img,
.resize-container:active img {
    outline: 2px dashed rgba(0,0,0,.9);
}

.resize-handle-ne,
.resize-handle-se,
.resize-handle-nw,
.resize-handle-sw {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(0,0,0,.9);
    z-index: 999;
}

.resize-handle-nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.resize-handle-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.resize-handle-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.resize-handle-se {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

.top-overlay {
    z-index: 990;
    background-color: #00afda;
    width: 100%;
    height: 50%;
    position: absolute;
}

.bottom-overlay {
    z-index: 990;
    background-color: #00afda;
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
}

.left-overlay {
    z-index: 990;
    background-color: #00afda;
    width: 35.7%;
    height: 300px;
    top: 50%;
    position: absolute;
}

.right-overlay {
    z-index: 990;
    background-color: #00afda;
    width: 35.3%;
    height: 50%;
    top: 50%;
    right: 0px;
    position: absolute;
}



.overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    /*margin-left: -14.5%;
    margin-top: -14.5%;*/
    z-index: 991;
    width: 25%;
    height: 50%;
    border: dashed 2px #00afda;
    box-sizing: content-box;
    pointer-events: none;
}

    .overlay:before {
        top: 0;
        margin-left: -2px;
        margin-top: -40px;
    }

    .overlay:after {
        bottom: 0;
        margin-left: -2px;
        margin-bottom: -40px;
    }


.overlay-inner:before {
    left: 0;
    margin-left: -40px;
    margin-top: -2px;
}

.overlay-inner:after {
    right: 0;
    margin-right: -40px;
    margin-top: -2px;
}

.image_editor_footer {
    position: absolute;
    bottom: 0px;
    display: block;
    text-align: right;
    width: 100%;
    z-index: 1000;
}

.image_editor_footer_mobile {
    position: absolute;
    bottom: 0px;
    display: block;
    text-align: right;
    width: 100%;
    z-index: 1000;
    padding-bottom: 6%;
}

.image_editor_done_btn {
    right: 0;
    padding: 10px 25px;
    border-radius: 10px;
    border: solid 1px gray;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    font-size: 1em;
    margin: 0px 10px 10px 0px;
}

    .image_editor_done_btn:hover {
        background: #00afda;
        color: #00afad;
        transition: all ease-in-out 500ms
    }

    .image_editor_done_btn:active {
        background: black;
        color: white;
        transition: all ease-in-out 10ms;
    }

.image_editor_done_btn_mobile {
    right: 0;
    padding: 6px 10px;
    border-radius: 10px;
    border: solid 1px gray;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    font-size: 1em;
    margin: 0px 10px 10px 0px;
}

    .image_editor_done_btn_mobile:hover {
        background: #00afda;
        color: #00afad;
        transition: all ease-in-out 500ms
    }

    .image_editor_done_btn_mobile:active {
        background: black;
        color: white;
        transition: all ease-in-out 10ms;
    }

.cw_image_editor_toolbar_div {
    position: absolute;
    z-index: 1001;
    height: 100%;
    border-radius: 10px;
    background: rgba(249, 151, 236, 0.08);
    padding: 0px 10px 0px 10px;
    text-align: center;
    border-right: solid 2px rgba(196, 19, 236, 0.3);
}

.cw_toolbar_btn_group {
    margin-top: 50%;
}

.cw_ie_header_div {
    background: #00afda;
    text-align: center;
    font-size: 1em;
    font-family: ubuntu,sans-serif;
    color: #5a3459;
    height: 3%;
}

.cw_toolbar_mob_btn_group {
    display: inline;
    margin-right: 20%;
}

.cw_image_viewer {
    cursor: move;
    position: fixed;
    z-index: 100000;
    border-left: solid 4px #00afda;
    border-right: solid 4px #00afda;
    border-bottom: solid 4px #00afda;
}

.cw_iv_header {
    background-color: #00afda;
    color: #000000;
    text-align: center;
}

.cw_iv_close_btn {
    border-radius: 100%;
    text-shadow: none;
    border: solid 4px black;
    background-color: white;
    font-size: 1.5em;
    position: absolute;
    right: -3.5%;
    top: -1.2%;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

    .cw_iv_close_btn:hover {
        background-color: black;
        color: white;
        border-color: #808080;
        transition: all ease-in-out 500ms;
    }

    .cw_iv_close_btn:active {
        background-color: white;
        color: black;
        transition: none;
    }
/*cw_basic input form*/
.cw_fieldset {
    border: 1px darkgray solid;
    margin: 10px;
    padding: 0px 10px;
}

.cw_legend {
    width: auto;
    margin: 0px;
    padding: 0px 5px;
    border-style: none;
}

/*Filter and Sorting color change*/
.k-grid-filter.k-state-active {
    background-color: #76d279;
}

thead .k-i-arrow-n {
    background-color: #76d279;
}

thead .k-i-arrow-s {
    background-color: #76d279;
}