.evoButton, .evoButtona, .evoButtonImg, .evoButtonImga{
    border-radius: 0.4em;
    font-size: 0.8em;
    font-weight: bold;
    padding-bottom: 0.3em;
    padding-top: 0.3em;
    min-width: 10em;

    margin-right: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    /*for ios*/
    -webkit-appearance: none;
}
.evoButton:hover, .evoButtona:hover, .evoButtonImg:hover, .evoButtonImga:hover{
    cursor: pointer;

    /*Efek*/
    transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton1, .evoButtonImg1 a div, .evoButtonImg1,.evoButton1a:hover ,.evoButtonImg1a:hover{
    background-color: #428bca;
    border: 0.1em solid #009dde;
    color: #ffffff;
}
.evoButtonImg1:hover, .evoButton1a, .evoButtonImg1a{
    background-color: #ffffff;
    border: 0.1em solid #009dde;
    color: #428bca;
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton2, .evoButtonImg2 a div, .evoButtonImg2,.evoButton2a:hover, .evoButtonImg2a:hover{
    background-color: rgba(0, 0, 0,80);
    color: rgb(240,240,240);
    border: 0.1em solid rgba(0, 0, 0,80);
}
.evoButtonImg2:hover, .evoButton2a, .evoButtonImg2a{
    background-color: rgb(255,255,255);
    color: rgba(0, 0, 0,80);
    border: 0.1em solid rgba(0, 0, 0,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton3, .evoButtonImg3 a div, .evoButtonImg3,.evoButton3a:hover, .evoButtonImg3a:hover{
    background-color: rgba(37, 77, 110,80);
    color: rgb(240,240,240);
    border: 0.1em solid rgba(37, 77, 110,80);
}
.evoButtonImg3:hover, .evoButton3a, .evoButtonImg3a{
    background-color: rgb(255,255,255);
    color: rgba(37, 77, 110,80);
    border: 0.1em solid rgba(37, 77, 110,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton4, .evoButtonImg4 a div, .evoButtonImg4,.evoButton4a:hover, .evoButtonImg4a:hover{
    background-color: rgba(247, 150, 71,80);
    color: rgb(255,255,255);
    border: 0.1em solid rgba(247, 150, 71,80);
}
.evoButtonImg4:hover, .evoButton4a, .evoButtonImg4a{
    background-color: rgb(255,255,255);
    color: rgba(247, 150, 71,80);
    border: 0.1em solid rgba(247, 150, 71,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton5, .evoButtonImg5 a div, .evoButtonImg5,.evoButton5a:hover, .evoButtonImg5a:hover{
    background-color: rgba(182, 52, 52,80);
    color: rgb(255,255,255);
    border: 0.1em solid rgba(182, 52, 52,80);
}
.evoButtonImg5:hover, .evoButton5a, .evoButtonImg5a{
    background-color: rgb(255,255,255);
    color: rgba(182, 52, 52,80);
    border: 0.1em solid rgba(182, 52, 52,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton6, .evoButtonImg6 a div, .evoButtonImg6,.evoButton6a:hover, .evoButtonImg6a:hover{
    background-color: rgb(0,128,0);
    color: rgb(255,255,255);
    border: 0.1em solid rgb(0,128,0);
}
.evoButtonImg6:hover, .evoButton6a, .evoButtonImg6a{
    background-color: rgb(255,255,255);
    color: rgba(0, 128, 0,80);
    border: 0.1em solid rgb(0,128,0);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton7, .evoButtonImg7 a div, .evoButtonImg7,.evoButton7a:hover, .evoButtonImg7a:hover{
    background-color: rgb(0, 149, 182);
    color: rgb(255,255,255);
    border: 0.1em solid rgb(0, 149, 182);
}
.evoButtonImg7:hover, .evoButton7a, .evoButtonImg7a{
    background-color: rgb(255,255,255);
    color: rgba(0, 149, 182,80);
    border: 0.1em solid rgb(0, 149, 182);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton8, .evoButtonImg8 a div, .evoButtonImg8,.evoButton8a:hover, .evoButtonImg8a:hover{
    background-color: rgb(48, 214, 200);
    color: rgb(255,255,255);
    border: 0.1em solid rgb(48, 214, 200);
}
.evoButtonImg8:hover, .evoButton8a, .evoButtonImg8a{
    background-color: rgb(255,255,255);
    color: rgba(48, 214, 200,80);
    border: 0.1em solid rgb(48, 214, 200);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton9, .evoButtonImg9 a div, .evoButtonImg9,.evoButton9a:hover, .evoButtonImg9a:hover{
    background-color: rgba(191, 191, 191,80);
    color: rgb(255,255,255);
    border: 0.1em solid rgba(191, 191, 191,80);
}
.evoButtonImg9:hover, .evoButton9a, .evoButtonImg9a{
    background-color: rgb(255,255,255);
    color: rgba(191, 191, 191,80);
    border: 0.1em solid rgba(191, 191, 191,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton10, .evoButtonImg10 a div, .evoButtonImg10,.evoButton10a:hover, .evoButtonImg10a:hover{
    background-color: rgba(255, 204, 0,80);
    color: rgb(255,255,255);
    border: 0.1em solid rgba(255, 204, 0,80);
}
.evoButtonImg10:hover, .evoButton10a, .evoButtonImg10a{
    background-color: rgb(255,255,255);
    color: rgba(255, 204, 0,80);
    border: 0.1em solid rgba(255, 204, 0,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton11, .evoButtonImg11 a div, .evoButtonImg11,.evoButton11a:hover, .evoButtonImg11a:hover{
    background-color: rgba(61, 193, 136, 1);
    color: rgb(255,255,255);
    border: 0.1em solid rgba(61, 193, 136,80);
}
.evoButtonImg11:hover, .evoButton11a, .evoButtonImg11a{
    background-color: rgb(255,255,255);
    color: rgba(61, 193, 136,80);
    border: 0.1em solid rgba(61, 193, 136,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoButton12, .evoButtonImg12 a div, .evoButtonImg12,.evoButton12a:hover, .evoButtonImg12a:hover{
    background-color: rgba(242, 15, 85,0.9);
    color: rgb(255,255,255);
    border: 0.1em solid rgba(242, 15, 85,0.9);
}
.evoButtonImg12:hover, .evoButton12a, .evoButtonImg12a{
    background-color: rgb(255,255,255);
    color: rgba(255, 0, 255,0.9);
    border: 0.1em solid rgba(255, 0, 255,0.9);
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*--TextBox-----------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.evoTextBox, .evoNumberBox, .evoPassword, .evoEmail, .evoUrl, .evoDateBox, .evoFile, .evoTimeBox, .evoDateWeekBox, .evoDateTimeBox, .evoSearchBox{
    width: 100%;
    min-width:100%;
    height: 2.9em;

    border: 0.1em solid #CCCCCC;
    background: #fff;
    color:#000;
    border-radius: 0.4em;

    font-size: 0.8em;
    text-indent: 0.8em;
    padding: 0 0 0 0;

    margin-top: 0.5em;
    margin-bottom: 0.5em;
    /*for ios*/
    -webkit-appearance: none;
}
.evoRange{
    width: 100%;
}
.evoFile{
    text-indent: 0.2em;
}

.evoTextBox:focus, .evoNumberBox:focus, .evoPassword:focus, .evoEmail:focus, .evoUrl:focus, .evoDateBox:focus, .evoTimeBox:focus, .evoDateWeekBox:focus, .evoDateTimeBox:focus, .evoSearchBox:focus{
    outline: 0 none;
}

/*--------------------------------------------------------------------------------------------------------------------*/
.evoTextBox{
    border: 0.1em solid #CCCCCC;
}
.evoTable2Search, .evoTableSearch{
    width: 99%;
    min-width: 99%;
}
/*--------------------------------------------------------------------------------------------------------------------*/

.evoInput1:focus, .evoTextBox1:focus, .evoComboBox1:focus, .evoTextArea1:focus{
    border-color: #66AFE9;
    box-shadow: 0 2px 2px rgba(0,0,0,0.075) inset, 0 1px rgba(102,175,233,0.6);
}
.evoInput2:focus, .evoTextBox2:focus .evoComboBox2:focus, .evoTextArea2:focus{
    border-color: rgba(0, 0, 0,80);
    box-shadow: 0 2px 2px rgba(0,0,0,0.075) inset, 0 1px rgba(0,0,0,0.6);
}
.evoInput3:focus, .evoTextBox3:focus .evoComboBox3:focus, .evoTextArea3:focus{
    border-color: rgba(37, 77, 110,80);
    box-shadow: 0 2px 2px rgba(0,0,0,0.075) inset, 0 1px rgba(37, 77, 110,0.6);
}
.evoInput4:focus, .evoTextBox4:focus .evoComboBox4:focus, .evoTextArea4:focus{
    border-color: rgba(247, 150, 71,80);
    box-shadow: 0 2px 2px rgba(0,0,0,0.075) inset, 0 1px rgba(247, 150, 71,0.6);
}
.evoInput5:focus, .evoTextBox5:focus .evoComboBox5:focus, .evoTextArea5:focus{
    border-color: rgba(182, 52, 52,80);
    box-shadow: 0 2px 2px rgba(0,0,0,0.075) inset, 0 1px rgba(182, 52, 52,0.6);
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*--Input Group-------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.evoInputGroup{
    width: 100%;
    border-radius: 0.4em;
    border-collapse: separate;
    display: grid;
    grid-template-columns: 2em auto;
    border: 0.1em solid #CCCCCC;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.evoInputGroup > div > img{
    width: 1.2em;
}
.evoInputGroup > div{
    padding-top: 0.5em;
    border-top-left-radius: 0.4em;
    border-bottom-left-radius: 0.4em;
}
.evoInputGroup > input:last-child{
    border-top-right-radius: 0.4em;
    border-bottom-right-radius: 0.4em;
}
.evoInputGroup > div{
    width: 2em;
    text-align: center;
}
.evoInputGroup input, .evoInputGroup select{
    width: 100%;
    margin-bottom: 0;
    margin-top: 0;
    border: none;
    border-radius: 0;
}
.evoInputGroup > select{
    border-top-right-radius: 0.4em;
    border-bottom-right-radius: 0.4em;
}

.evoInputGroup1 > div, .evoOptionBox1 > option:checked, .evoOptionBoxMultiple1 > option:checked{
    background: #66AFE9;
    color: rgb(255,255,255);
}
.evoInputGroup2 > div, .evoOptionBox2 > option:checked, .evoOptionBoxMultiple2 > option:checked{
    background-color: rgba(0, 0, 0,80);
    color: rgb(240,240,240);
}
.evoInputGroup3 > div, .evoOptionBox3 > option:checked, .evoOptionBoxMultiple3 > option:checked{
    background-color: rgba(37, 77, 110,80);
    color: rgb(240,240,240);
}
.evoInputGroup4 > div, .evoOptionBox4 > option:checked, .evoOptionBoxMultiple4 > option:checked{
    background-color: rgba(247, 150, 71,80);
    color: rgb(240,240,240);
}
.evoInputGroup5 > div, .evoOptionBox5 > option:checked, .evoOptionBoxMultiple5 > option:checked{
    background-color: rgba(182, 52, 52,80);
    color: rgb(240,240,240);
}
.evoInputGroup6 > div, .evoOptionBox6 > option:checked, .evoOptionBoxMultiple6 > option:checked{
    background-color: rgba(0, 128, 0,80);
    color: rgb(240,240,240);
}
.evoInputGroup7 > div, .evoOptionBox7 > option:checked, .evoOptionBoxMultiple7 > option:checked{
    background-color: rgba(0, 149, 182,80);
    color: rgb(240,240,240);
}
.evoInputGroup8 > div, .evoOptionBox8 > option:checked, .evoOptionBoxMultiple8 > option:checked{
    background-color: rgba(48, 214, 200,80);
    color: rgb(240,240,240);
}
.evoInputGroup9 > div, .evoOptionBox9 > option:checked, .evoOptionBoxMultiple9 > option:checked{
    background-color: rgba(191, 191, 191,80);
    color: rgb(240,240,240);
}
.evoInputGroup10 > div, .evoOptionBox10 > option:checked, .evoOptionBoxMultiple10 > option:checked{
    background-color: rgba(255, 204, 0,80);
    color: rgb(240,240,240);
}
.evoInputGroup11 > div, .evoOptionBox11 > option:checked, .evoOptionBoxMultiple11 > option:checked{
    background-color: rgba(255, 204, 0,80);
    color: rgb(240,240,240);
}
.evoInputGroup12 > div, .evoOptionBox12 > option:checked, .evoOptionBoxMultiple12 > option:checked{
    background-color: rgba(255, 204, 0,80);
    color: rgb(240,240,240);
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*--TextArea----------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.evoTextArea{
    width: 100%;
    height: 50px;
    border:0.1em solid #A5A5A5;
    border-radius: 0.4em;
    background: #fff;
    padding:0.4em;
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*--ComboBox----------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.evoComboBox, .evoOptionBox, .evoOptionBoxMultiple{
    width: 100%;
    height: 2.6em;

    background: #ffffff;

    border-radius: 0.4em;
    border: 1px solid #CCCCCC;

    margin-bottom: 0.5em;
    margin-top: 0.5em;

    font-size: 14px;
    text-indent: 0.2em;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-position:
            calc(100% - 20px) calc(1em + 4px),
            calc(100% - 15px) calc(1em + 4px),
            100% 0;
    background-size: 5px 6px, 5px 6px, 2.8em 2.8em;
    background-repeat: no-repeat;

    text-overflow: "...          ";
}

.evoComboBox:focus, .evoOptionBox:focus {
    background-image:
            linear-gradient(45deg, white 50%, transparent 50%),
            linear-gradient(135deg, transparent 50%, white 50%),
            linear-gradient(to right, gray, gray);
    background-position:
            calc(100% - 15px) 1em,
            calc(100% - 20px) 1em,
            100% 0;
    background-size: 5px 6px, 5px 6px, 2.8em 2.8em;
    background-repeat: no-repeat;
    border-color: grey;
    outline: 0;
}

.evoComboBox > option, .evoOptionBox > option, .evoOptionBoxMultiple > option{
    padding: 0.4em;
    /*padding-bottom: 0.4em;*/
    text-indent: 0.2em;
    border-bottom: 1px solid #cccccc;
}

.evoComboBox > option:last-child,
.evoOptionBox > option:last-child,
.evoOptionBoxMultiple > option:last-child{
    border-bottom: none;
}

.evoComboBox[multiple], .evoOptionBox[multiple], .evoOptionBoxMultiple[multiple]{
    height: auto;
}

/*COLORS*/
.evoOptionBox1{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, #009dde, #009dde);
}
.evoOptionBox2{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(0, 0, 0,80), rgba(0, 0, 0,80));
}
.evoOptionBox3{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(37, 77, 110,80), rgba(37, 77, 110,80));
}
.evoOptionBox4{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(247, 150, 71,80), rgba(247, 150, 71,80));
}
.evoOptionBox5{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(182, 52, 52,80), rgba(182, 52, 52,80));
}
.evoOptionBox6{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(0, 204, 0,80), rgba(0, 204, 0,80));
}
.evoOptionBox7{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(0, 149, 182,80), rgba(0, 149, 182,80));
}
.evoOptionBox8{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(48, 214, 200,80), rgba(48, 214, 200,80));
}
.evoOptionBox9{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(191, 191, 191,80), rgba(191, 191, 191,80));
}
.evoOptionBox10{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(255, 204, 0,80), rgba(255, 204, 0,80));
}
.evoOptionBox11{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(255, 204, 0,80), rgba(255, 204, 0,80));
}
.evoOptionBox12{
    background-image:
            linear-gradient(45deg, transparent 50%, white 50%),
            linear-gradient(135deg, white 50%, transparent 50%),
            linear-gradient(to right, rgba(255, 204, 0,80), rgba(255, 204, 0,80));
}
/**/
.evoButtonImg, .evoButtonImga{
    min-width: 2em;
    max-width: 14em;
    vert-align: middle;
    display:inline-block;
}
.evoButtonImg a, .evoButtonImga a{
    display: block;
    text-decoration: none;
}

.evoButtonImg > div > label:hover, .evoButtonImga > div > label:hover{
    cursor: pointer;
}
.evoButtonImg a img, .evoButtonImg img, .evoButtonImga a img, .evoButtonImga img{
    width: 64px;
}
.evoButtonImg a label, .evoButtonImg > div > label, .evoButtonImga a label, .evoButtonImga > div > label{
    font-family: FontAwesome;
    font-size: 2.2em;
}
.evoButtonImg a div, .evoButtonImg > div, .evoButtonImga a div, .evoButtonImga > div{
    display: table-cell;
    vertical-align: middle;
    padding-right: 0.6em;
    border: none;
}
.evoButtonImg a div:first-child, .evoButtonImg > div:first-child, .evoButtonImga a div:first-child, .evoButtonImga > div:first-child{
    padding-left: 0.6em;
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*--ToggleButton------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.evoToggleButton{
    cursor: pointer;
}
.evoToggleButton input {
    display: none;

    /*position: absolute;
    left: -9999px;*/
}

.evoToggleButton .text {
    font: 12px/14px sans-serif;
    color: #666;
    position: relative;
    top: -3px;
    padding-left: 10px;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;      /* Internet Explorer/Edge */
    user-select: none;
}

.evoToggleButton .checkBoxToggle {
    display: inline-block;
    width: 36px;
    height: 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .26);
    position: relative;
    transition: 300ms background;
}

.evoToggleButton .checkBoxToggle span {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -3px;
    left: 0;
    background: #fff;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .4);
    border-radius: 50%;
    transition: 300ms left, background;
}
.evoToggleButton input:checked + .checkBoxToggle span{
    left: 16px;
}

/*--------------------------------------------------------------------------------------------------------------------*/
.evoToggleButton1 input:checked + .checkBoxToggle span{
    background: #009dde;
}
.evoToggleButton1 input:checked + .checkBoxToggle {
    background: #83b1f4;
}
.evoToggleButton1 input:checked + .checkBoxToggle + .text{
    color: #009dde;
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoToggleButton2 input:checked + .checkBoxToggle span{
    background: rgba(0, 0, 0,80);
}
.evoToggleButton2 input:checked + .checkBoxToggle {
    background: rgba(80,80,80,80);
}
.evoToggleButton2 input:checked + .checkBoxToggle + .text{
    color: rgba(0, 0, 0,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoToggleButton3 input:checked + .checkBoxToggle span{
    background: rgba(37, 77, 110,80);
}
.evoToggleButton3 input:checked + .checkBoxToggle {
    background: #83b1f4;
}
.evoToggleButton3 input:checked + .checkBoxToggle + .text{
    color: rgba(37, 77, 110,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoToggleButton4 input:checked + .checkBoxToggle span{
    background: rgba(247, 150, 71,80);
}
.evoToggleButton4 input:checked + .checkBoxToggle {
    background: rgba(247, 150, 71,0.6);
}
.evoToggleButton4 input:checked + .checkBoxToggle + .text{
    color: rgba(247, 150, 71,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoToggleButton5 input:checked + .checkBoxToggle span{
    background: rgba(182, 52, 52,80);
}
.evoToggleButton5 input:checked + .checkBoxToggle {
    background: rgba(182, 52, 52,0.6);
}
.evoToggleButton5 input:checked + .checkBoxToggle + .text{
    color: rgba(182, 52, 52,80);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.evoToggleButton6 input:checked + .checkBoxToggle span{
    background: rgb(0,128,0);
}
.evoToggleButton6 input:checked + .checkBoxToggle {
    background: rgb(0, 160, 0);
}
.evoToggleButton6 input:checked + .checkBoxToggle + .text{
    color: rgb(0,128,0);
}

.EImgFileAndPreview{
    background: #fff;
    border-radius: 0.4em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
}
.EImgFileAndPreviewIMG{
    width: 100%;
    border: 0.1em solid #CCCCCC;
    border-radius: 0.4em;
}

.embed{
    width: 100%;
    height: 800px;
}