.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-bold { font-family: circularBold; }
.ucopyright { font-size: 12px; text-align: center; color: #999; }
.to-left { float: left; }
.to-right { float: right; }
.to-center { margin: 0 auto; }
.floatNone {float: none !important; }
.dspNone { display: none; }
.dspInlineBlock { display: inline-block; }
.posRelative { position: relative; }
.mw100 { max-width: 100%; }
.captcha-area img { max-width: 100%; }
.owh { overflow: hidden; }
/* FORM ELEMENTS */
input, 
    select, 
        textarea { 
            border: #d4d4d4 1.25px solid; 
            border-radius: 3px; 
            padding: 12px; 
            font-family: circularBook; 
            font-size: 13px; 
            background-color: #f9fcff;
        }

select {
    padding: 12px 12px 10px 12px;
}

input:focus, 
    select:focus, 
        textarea:focus { 
            border: #4c9afd 1.25px solid; 
            outline: #4c9afd 1.25px solid; 
        }

input:disabled,
    textarea:disabled,
        select:disabled {
        border: #f2f2f2 1.25px solid; 
        outline: #f2f2f2 1.25px solid; 
        background-color: #f2f2f2;
        color: #999;
    }


input[type="file"] { 
    padding: 9px; 
}

div.el.error input, 
    div.el.error select, 
        div.el.error textarea { 
        border: #cc0001 1.25px solid; 
    }

div.el.error input:focus, 
    div.el.error select:focus, 
        div.el.error textarea:focus { 
            border: #cc0001 1.25px solid; 
            outline: #cc0001 1.25px solid; 
        }

div.el span.error-msg { 
    color: #cc0001; 
    display: block; 
    line-height: 30px;
    font-size: 11.5px;
    font-family: circularBold;
    display: none;
}

div.el.error span.error-msg { 
    display: block;
}

/*  ---
    form layouts
    ---
*/
.ufields {
    /* margin-bottom: 20px; */
    overflow: hidden;
}

.uform-header {
    padding: 20px;
    background-color: #006b2b;
    color: #fff;
}

.uform-header h3 {
    font-family: circularBold;
    margin: 0; 
    padding: 0;
    font-size: 16px;
    font-weight: normal;
}

.uform-body {
    padding: 20px;
}

.uform-body h3 {
    color: #009900;
    font-family: circularBold;
    font-size: 18px;
    border-bottom: #e8e8e8 1px solid;
    padding-bottom: 10px;
}

.urow-header {
    position: relative;
    padding: 10px 10px 10px 0;
}

.urow-header label {
    display: inline-block;
    background-color: #fff; /* form farklı bir renkse burayi degistirin */
    padding: 5px 10px 5px 0;
    position: relative;
    z-index: 2;
    font-family: circularBold;
    color: #009900;
    font-size: 15px;
    line-height: 22px;
}

.urow-header hr {
    height: 1.5px;
    position: absolute;
    width: 100%;
    top: 17px;
    border: 0;
    left: 0;
    border-top: #009900 1px solid;
    height: 0;
}

.urow {
    overflow: hidden;
}

.ufield { 
    margin-bottom: 15px; 
    display: flow-root;
}

.ufield.hovered { padding: 10px 15px; margin: 0; }
.ufield.hovered:hover { background-color: #f5f5f5; }

.ufield label { 
    float: left; 
    color: #242424; 
    font-size: 13px; 
    line-height: 44px; 
    font-family: circularBold; 
}

.ufield.vertical label { 
    display: block; 
    padding-left: 5px;
    line-height: 30px; 
    float: none; 
    font-size: 13px; 
    font-family: circularBold; 
}

.ufield div.el input, 
    .ufield div.el select, 
        .ufield div.el textarea { 
            width: 100%; 
                box-sizing: border-box;
        }

.ufield div.el.checkbox { 
    float: left; 
    padding: 11px 8px 0 0; 
}

.ufield div.el .field-validation-error { 
    border-color: #cc0001; 
}

.ufield p { 
    font-size: 15px; 
    margin: 0; 
    padding: 0; 
}

.uinfo-panel {
    margin-bottom: 30px;
    padding: 22px 20px 20px 52px;
    background-color: #f5f5f5;
    border-radius: 5px;
    color: #707070;
    line-height: 22px;
    position: relative;
}

.uinfo-panel i {
    position: absolute;
    left: 20px;
}

span.uradio {
    display: inline-block;
    white-space: nowrap;
    padding: 10px 20px;
    margin-right: 5px;
    background-color: #f2f2f2;
    border-radius: 16px;
    font-size: 12px;
    font-family: circularBold;
    color: #707070;
    cursor: pointer;
}

span.uradio.selected {
    background-color: #006b2b;
    color: #fff;
    cursor: default;
}

.uform-button-set {
    overflow: hidden;
    padding: 0 0 20px 0;
}

/* button */
.btn { cursor: pointer; padding: 10px 30px; border: transparent 1px solid; outline: none; border-radius: 4px; margin: 0 3px; }
.btn.large { padding: 12px 30px; }
.btn.radius { border-radius: 22px; }
.btn.green { color: #fff; background-color: #006b2b; }
.btn.green:hover { background-color: #005020; }
.btn.red { background-color: #cc0001; color: #fff; }
.btn.red:hover { background-color: #a70001; }
.btn.tgray { background-color: transparent; color: #242424; }
.btn.tgray:hover { background-color: #f2f2f2; color: #005020; }
button:disabled { background-color: #d4d4d4 !important; color: #999 !important; }

/* 
    ---
    common
    ---
*/

/* statik width classlari herseyi ezer */
.w-30 { width: 30px !important; }
.w-40 { width: 40px !important; }
.w-50 { width: 50px !important; }
.w-60 { width: 60px !important; }
.w-70 { width: 70px !important; }
.w-80 { width: 80px !important; }
.w-90 { width: 90px !important; }
.w-100 { width: 100px !important; }
.w-150 { width: 150px !important; }
.w-200 { width: 200px !important; }
.w-250 { width: 250px !important; }
.w-300 { width: 300px !important; }
.w-350 { width: 350px !important; }
.w-400 { width: 400px !important; }
.w-450 { width: 450px !important; }
.w-500 { width: 500px !important; }

.col-1 { width: 8.33%; float:left; }
.col-2 { width: 16.66%; float:left; }
.col-3 { width: 24.99%; float:left; }
.col-4 { width: 33.32%; float:left; }
.col-5 { width: 41.65%; float:left; }
.col-6 { width: 49.98%; float:left; }
.col-7 { width: 58.31%; float:left; }
.col-8 { width: 66.64%; float:left; }
.col-9 { width: 74.97%; float:left; }
.col-10 { width: 83.3%; float:left; }
.col-11 { width: 91.63%; float:left; }
.col-12 { width: 100%; float:left; }

.p-05 { padding: 5px; }
.pt-05 {padding-top: 5px; }
.pr-05 { padding-right: 5px; }
.pb-05 {padding-bottom: 5px; }
.pl-05 {padding-left: 5px; }
.p-1 { padding: 10px; }
.pt-1 {padding-top: 10px; }
.pr-1 { padding-right: 10px; }
.pb-1 {padding-bottom: 10px; }

.p-15 { padding: 15px; }
.pt-15 {padding-top: 15px; }
.pr-15 { padding-right: 15px; }
.pl-15 { padding-left: 15px; }
.pb-15 {padding-bottom: 15px; }

.pl-1 {padding-left: 10px; }
.p-2 { padding: 20px; }
.pt-2 {padding-top: 20px; }
.pr-2 { padding-right: 20px; }
.pb-2 {padding-bottom: 20px; }
.pl-2 {padding-left: 20px; }
.p-3 { padding: 30px; }
.pt-3 {padding-top: 30px; }
.pr-3 { padding-right: 30px; }
.pb-3 {padding-bottom: 30px; }
.pl-3 {padding-left: 30px; }
.p-4 { padding: 40px; }
.pt-4 {padding-top: 40px; }
.pr-4 { padding-right: 40px; }
.pb-4 {padding-bottom: 40px; }
.pl-4 {padding-left: 40px; }
.p-5 { padding: 50px; }
.pt-5 {padding-top: 50px; }
.pr-5 { padding-right: 50px; }
.pb-5 {padding-bottom: 50px; }
.pl-5 {padding-left: 50px; }
.pre { padding-right: 10px; } /* sagdaki elemanla arayi ac */
.ple { padding-left: 10px; } /* soldaki elemanla arayi ac */

.m-05 { margin: 5px; }
.mt-05 {margin-top: 5px; }
.mr-05 { margin-right: 5px; }
.mb-05 {margin-bottom: 5px; }
.ml-05 {margin-left: 5px; }
.m-1 { margin: 10px !important; }
.mt-1 {margin-top: 10px !important; }
.mr-1 { margin-right: 10px !important; }
.mb-1 {margin-bottom: 10px !important; }
.ml-1 {margin-left: 10px !important; }
.m-2 { margin: 20px !important; }
.mt-2 {margin-top: 20px !important; }
.mr-2 { margin-right: 20px !important; }
.mb-2 {margin-bottom: 20px !important; }
.ml-2 {margin-left: 20px !important; }
.m-3 { margin: 30px !important; }
.mt-3 {margin-top: 30px !important; }
.mr-3 { margin-right: 30px !important; }
.mb-3 {margin-bottom: 30px !important; }
.ml-3 {margin-left: 30px !important; }
.m-4 { margin: 40px !important; }
.mt-4 {margin-top: 40px !important; }
.mr-4 { margin-right: 40px !important; }
.mb-4 {margin-bottom: 40px !important; }
.ml-4 {margin-left: 40px !important; }
.m-5 { margin: 50px !important; }
.mt-5 {margin-top: 50px !important; }
.mr-5 { margin-right: 50px !important; }
.mb-5 {margin-bottom: 50px !important; }
.ml-5 {margin-left: 50px !important; }

/* tables */
table { border-collapse: collapse; }
table.data-table { width: 100%; }
table.data-table td { padding: 12px 10px; font-family: circularBook; font-size: 14px; color: #434252; }
table.data-table td i { margin-top: 3px; cursor: default; }
table.data-table.with-icon tr td:nth-child(1) { padding-left: 50px; }
table.zebra tr:nth-child(even) {background: #f8fafd}
table.zebra tr:nth-child(odd) {background: #FFF}
table.hovered tr:hover { background-color: #eff2fb; }
table.data-table th { background-color: #fff; padding: 12px 10px; text-align: left; font-family: circularBold; font-size: 12px; color: #636279; }
table tr.check-row { cursor: pointer; }
table tr.check-row:hover > td:nth-child(3) { color: #4866C8; }

/* MATERIAL PROGRESS */
.u-progress { top: 0; position: absolute; z-index: 10000; height: 1px; display: block; width: 100%; background-color: #acece6; border-radius: 2px; background-clip: padding-box; overflow: hidden; }
.u-progress .determinate { position: absolute; background-color: inherit; top: 0; bottom: 0; background-color: #26a69a; transition: width .3s linear; }
.u-progress .indeterminate:before { content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;  }
.u-progress .indeterminate:after { content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; -webkit-animation-delay: 1.15s; animation-delay: 1.15s;  }
@-webkit-keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } }
@keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } }
@-webkit-keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } }
@keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } }
/* customize progress */
.u-progress.px1 { height: 1px; }
.u-progress.px2 { height: 2px; }
.u-progress.px3 { height: 3px; }
.u-progress.px4 { height: 4px; }
.u-progress.px5 { height: 5px; }

.u-progress .indeterminate { background-color: #26a69a;  }
.u-progress.progress-red { background-color: #cc0001; }
.u-progress.progress-red .indeterminate { background-color: #ffdddd;  }
.u-progress.progress-orange { background-color: #ff5800; }
.u-progress.progress-orange .indeterminate { background-color: #ffd1b8;  }

/* NATIVE SNACK BAR */
/* The snackbar - position it at the bottom and in the middle of the screen */
#u-Snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

#u-Snackbar div {
    padding: 16px; /* Padding */
    border-radius: 4px; /* Rounded borders */

}

#u-Snackbar div.info {
    background-color: #333; /* Black background color */
}

#u-Snackbar div.error { 
    background-color: #cc0001 !important; 
}

#u-Snackbar.show {
    visibility: visible; /* Show the snackbar */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;} 
to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;} 
to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}

/* LAPTOP - PC */
@media only screen and (max-width : 1500px) {
    
}

/* TABLET YATAY */
@media only screen and (max-width : 1024px) {
    .th-col-1 { width: 8.33%; float:left; }
    .th-col-2 { width: 16.66%; float:left; }
    .th-col-3 { width: 24.99%; float:left; }
    .th-col-4 { width: 33.32%; float:left; }
    .th-col-5 { width: 41.65%; float:left; }
    .th-col-6 { width: 49.98%; float:left; }
    .th-col-7 { width: 58.31%; float:left; }
    .th-col-8 { width: 66.64%; float:left; }
    .th-col-9 { width: 74.97%; float:left; }
    .th-col-10 { width: 83.3%; float:left; }
    .th-col-11 { width: 91.63%; float:left; }
    .th-col-12 { width: 100%; float:left; }
}

/* TABLET DIKEY */
@media only screen and (max-width : 768px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{ float: none; width:100%; }
    .tp-col-1 { width: 8.33%; float:left; }
    .tp-col-2 { width: 16.66%; float:left; }
    .tp-col-3 { width: 24.99%; float:left; }
    .tp-col-4 { width: 33.32%; float:left; }
    .tp-col-5 { width: 41.65%; float:left; }
    .tp-col-6 { width: 49.98%; float:left; }
    .tp-col-7 { width: 58.31%; float:left; }
    .tp-col-8 { width: 66.64%; float:left; }
    .tp-col-9 { width: 74.97%; float:left; }
    .tp-col-10 { width: 83.3%; float:left; }
    .tp-col-11 { width: 91.63%; float:left; }
    .tp-col-12 { width: 100%; float:left; }

    .pre { padding-right: 0px; /*margin-top: 10px;*/ } /* elemanlar alt alta gelecegi icin */
    .ple { padding-left: 0px;  /*margin-top: 10px;*/ } /* paddingleri kaldir */
    .tp-pre { padding-right: 5px; } /* sagdaki elemanla arayi ac */
    .tp-ple { padding-left: 5px; } /* soldaki elemanla arayi ac */
}

/* TELEFON */
@media only screen and (max-width : 760px) {
    #u-Snackbar { left: 0; width: 100%; margin-left: 0; padding: 0 30px; }
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
        .tp-col-1, .tp-col-2, .tp-col-3, .tp-col-4, .tp-col-5, .tp-col-6, .tp-col-7, .tp-col-8, .tp-col-9, .tp-col-10, .tp-col-11, .tp-col-12 { 
            float: none; width:100%; 
        }
    .p-col-1 { width: 8.33%; float:left; }
    .p-col-2 { width: 16.66%; float:left; }
    .p-col-3 { width: 24.99%; float:left; }
    .p-col-4 { width: 33.32%; float:left; }
    .p-col-5 { width: 41.65%; float:left; }
    .p-col-6 { width: 49.98%; float:left; }
    .p-col-7 { width: 58.31%; float:left; }
    .p-col-8 { width: 66.64%; float:left; }
    .p-col-9 { width: 74.97%; float:left; }
    .p-col-10 { width: 83.3%; float:left; }
    .p-col-11 { width: 91.63%; float:left; }
    .p-col-12 { width: 100%; float:left; }

    .tp-pre, .pre { padding-right: 0px; margin-top: 10px; } /* elemanlar alt alta gelecegi icin */
    .tp-ple, .ple { padding-left: 0px;  margin-top: 10px; } /* paddingleri kaldir */
    .p-ple { padding-left: 5px; }
    .p-pre { padding-right: 5px; }

    .urow-header { text-align: center; padding: 10px 20px; }
    .urow-header label { font-size: 14px; padding: 5px 10px 5px 10px; }
    span.uradio { margin-bottom: 10px; }
    .body .inner .uform-body { padding: 30px 20px 0 20px; }
    .uform-button-set {padding: 20px 0; }
    .uform-button-set button { margin: 5px 0px; width: 100%; }

}